<template>
  <el-sub-menu index="2">
    <template #title>实时路况</template>
    <el-menu-item index="2-1" @click="handleRoad">查看路况</el-menu-item>
    <el-menu-item index="2-2" @click="handleClose">关闭路况</el-menu-item>
  </el-sub-menu>

  <div class="road" v-show="flag">
    <div class="color1">畅通</div>
    <div class="color2">缓慢</div>
    <div class="color3">拥堵</div>
  </div>
</template>

<script setup>
import { RoadCondition } from './hooks/roadcondition.js'

const map = ref()
onMounted(() => {
  //初始化地图
  map.value = useGlobalMap()
})
const { handleClose, handleRoad, flag } = RoadCondition(map)
</script>

<style scoped>
@import url('./style/RoadCondition.css');
</style>
